<template>
  <div>
    <ShopcartHeader />
    <el-table e :data="[{}]">
      <el-table-column type="selection" width="55" label="全选" />
      <el-table-column>
        <template slot-scope="scope">
          <el-image class="table-img" :src="url" :name="scope.row" />
        </template>
      </el-table-column>
      <el-table-column label="商品名称" width="500" prop="" align="center" />
      <el-table-column label="单价" prop="" align="center" />
      <el-table-column label="数量" align="center">
        <el-input-number v-model="num" :min="1" label="描述文字" size="small" />
      </el-table-column>
      <el-table-column label="小计" prop="" />
      <el-table-column label="操作" prop="">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-close"
            circle
            type="danger"
            plain
            class="table-button"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import ShopcartHeader from "./components/ShopcartHeader.vue";
export default {
  name: "shopCart",
  components: {
    ShopcartHeader,
  },
  data() {
    return {
      num: 1,
      url: "",
    };
  },
  mounted() {
    this.getShopCartList();
  },
  methods: {
    getShopCartList() {
      this.$store.dispatch("getShopCartList");
    },
  },
};
</script>

<style lang="less" scoped>
.table-img {
  width: 60px;
  height: 60px;
}
.table-button {
  background-color: #fff;
  border: none;
  // font-style: normal;
}
</style>
